﻿@using Telerik.Web.Mvc.UI;
@using Tesis.Areas.Distribuciones.Models;
@using Tesis.Areas.Modelos.Models;

@model IEnumerable<Distribucion>
@{
	ViewBag.Title = "Distribuciones";
	Layout = "~/Views/Shared/_Layout.cshtml";
}
@Html.Telerik().ScriptRegistrar().Globalization(true)

<h2>Distribuciones</h2>

@{
	Html.Telerik().Grid(Model)
		.Name("GridDistribuciones")
		.DataKeys(keys => keys.Add(c => c.ID))
		.Pageable(paging =>
			paging.PageSize(1)
			.Style(GridPagerStyles.NextPreviousAndNumeric)
			.Position(GridPagerPosition.Bottom)
		)
		.Editable(editing => editing
						.Mode(GridEditMode.PopUp)
						.TemplateName("DistribucionTemplate"))
		.Columns(columns =>
		{
			columns.Bound(c => c.ID).Title("Tipo de Distribución");
		})
		.RowTemplate(grid => 
			@<text>
				<h2 style="vertical-align: middle; text-align: center"  >@item.Tipo</h2><br /><br />
				<table>
				<tr>
				<td>
					<div class="Distribucion-detalles">
						<dl>
							<dt>Descripcion:<br /><br /></dt>
							<dd>@item.Descripcion<br /><br /></dd>
						</dl>
					</div>
				</td>
				<td>
					<div class="Distribucion-detalles">
						<dl>
							<dt>Modelos:<br /><br /></dt>
							@{
								foreach (Modelo m in item.Modelos)
								{ 
								<dd>@(
										Html.Telerik().Menu()
												   .Name(m.Nombre)
												   .Items(menu => {
																	menu.Add()
																	.Text("  "+m.Nombre+"  ")
                                                                    .ImageUrl("~/Graficos/Menu/win.png")
                                                                    .Url("../../../Modelos/Modelo/Details/" + m.ID);
																	}
															))
								</dd>
								}
							}
						</dl>
					</div>
				</td>
				</tr>
				</table>
				<div>
					 @grid.EditButton(item)
				</div>
				<div>
					<dl style="vertical-align: middle; text-align: center">
						<dd><img src='@Url.Content(item.Imagen)'alt='@item.NombreCorto' style="border: thin solid #000080" /></dd>
						<dt><b>Imagen @item.NombreCorto</b></dt>
					</dl>
				</div>

		   </text>
		)
			.DataBinding(dataBinding => dataBinding.Server()
			.Update("Edit","Distribucion")
			.Select("Index", "Distribucion")
			)
		.Sortable()
		.Scrollable(scrolling => scrolling.Height(500))
		.Pageable()
		.Render();
		}

@section HeadContent {
	<style type="text/css">
		.Distribucion-detalles
		{
			width:100%;
			padding:.8em .6em;
			display:inline-block;
		}
		.Distribucion-detalles
		{
			display:block;
		}
		
		.Distribucion-detalles:after
		{
			content:"";
			display:block;
			clear:both;
		}
		
		.Distribucion-detalles dl,
		.Distribucion-detalles dt,
		.Distribucion-detalles dd
		{
			margin:0;
			padding:0;
		}
		
		.Distribucion-detalles img,
		.Distribucion-detalles h3,
		.Distribucion-detalles dl,
		.commands
		{
			float:left;
			clear:none;
			margin:0 14px 0 0;
		}
		.Distribucion-detalles h3,
		.Distribucion-detalles dl
		{
			border-width:0 1px 0 0;
			background-color:transparent;
			color:inherit;
		}
		
		.Distribucion-detalles h3
		{
			padding:0;
			font-size:1.5em;
			padding-right:20px;
		}
		
		.Distribucion-detalles dt
		{
			font-weight:bold;
		}
	.field-validation-error
	{
		position: absolute;
		display: block;
		
	}
	
	* html .field-validation-error { position: relative; }
	*+html .field-validation-error { position: relative; }
	
	.field-validation-error span
	{
		position: absolute;
		white-space: nowrap;
		color: red;
		padding: 17px 5px 3px;
		background: transparent url('<%= Url.Content("~/Content/Common/validation-error-message.png") %>')
			no-repeat 0 0;
	}
	
	/* in-form editing IMPORTANTISIMO*/
	.t-edit-form-container
	{
		width: 600px;
		margin: 1em;
	}
	
   
	.t-edit-form-container .editor-label
	{
		width:200px;
		text-align: left;
		font-weight:bold;
		padding-right: 3%;
		clear: left;
	}
	
	.t-edit-form-container .editor-field
	{
	   width: 350px;
	}
	</style>
}

